import {BaseEle, css, getDomSize} from "./core.js";

let globalZINDEX = 0;

class ZInputPopup extends BaseEle {
    constructor() {
        super();
        this.isOpen = false;
        this.attachShadow({mode: 'open'});
        this.setCSS(css`
            :host {
                --my-anchor-width: 0px;
                --my-anchor-height: 0px;
                --brand-blue: lch(38.953% 23.391 229.55deg);
                --brand-pink: lch(50.161% 77.603 3.8969deg);
            }
            
            .target {
                --element-color:  var(--brand-pink);
            }
            .anchor {
                --element-color: var( --brand-blue);
                text-align: center;
            }
            
            .anchor {
                border: var(--z-def-border, 1px solid #ccc) ;
                border-radius: var(--z-def-border-radius, 4px);
                padding: 3px 10px;
            }
            
            #my-anchor-positioning {
                width: max-content;
                min-width: var(--my-anchor-min-width, 30px);
                min-height:  var(--my-anchor-min-height, 19px);
            }

            #my-target-positioning {
                position: absolute;
                //top: anchor(--my-anchor-positioning bottom);
                //left: anchor(--my-anchor-positioning left);
                opacity: 0;
                pointer-events: none;
                z-index: -1;
                //height: 0;
                background-color: var(--z-def-background-color);
            }
            
            :host(.is-open) #my-target-positioning {
                opacity: 1;
                pointer-events: auto;
                z-index: auto;
                height: initial;
            }
            
            :host(:not(.is-open)) .con {
                //overflow: hidden;
            }
            
            :host(:not(.is-open))  #my-target-positioning  {
                //height: 0;
                //overflow: hidden;
                pointer-events: none;
                position: fixed;
                left: -100000000000000000px;
                top: -100000000000000000px;
            }


            :host(.pos-r) #my-target-positioning {
                //top: anchor(--my-anchor-positioning bottom);
                //right: anchor(--my-anchor-positioning right);
                transform: translate(calc(-100% + var(--my-anchor-width)), 0);
            }

            :host(.pos-lt) #my-target-positioning {
                transform: translateY(calc(-100% - var(--my-anchor-height)));
            }

            :host(.pos-rt) #my-target-positioning {
                transform: translate(calc(-100% + var(--my-anchor-width)), calc(-100% - var(--my-anchor-height)));
            }
            
            @supports not (left: anchor(left)) {
                :host(.pos-r) #my-target-positioning {
                    transform: translate(calc(-100% + var(--my-anchor-width)), 0);
                }
            }
        `);
        this._shadowRoot = this.shadowRoot;
        this._shadowRoot.innerHTML = `<div class="con" part="z_inputpopup_con" style="position: relative">
    <div id="my-anchor-positioning"  part="z_inputpopup_anchor_positioning"
     style="    anchor-name: --my-anchor-positioning;"
     class="anchor"><slot name="selectcontent"></slot></div>
    <div id="my-target-positioning" part="z_inputpopup_target_positioning"
     class="target">
    <slot></slot>
</div>
</div>`;

        this._shadowRoot.querySelector('#my-anchor-positioning').addEventListener('click', () => {
            if (!this.hasAttribute('readonly')) {
                this.isOpen = !this.isOpen;
                this.classList.toggle('is-open', this.isOpen);
                globalZINDEX++;
                this._shadowRoot.querySelector('#my-target-positioning').style.zIndex = globalZINDEX
            }
        })
    }
    mounted() {
        // if (!("anchorName" in document.documentElement.style)) {
        //     requestAnimationFrame(() => {
        //     })
        // }
        let anc = this._shadowRoot.querySelector('#my-anchor-positioning')
        requestAnimationFrame(() => {
            let stylemap = anc.computedStyleMap();
            let padding = parseFloat(stylemap.get('padding-left'))

            let width = getDomSize(anc) + padding ;
            this.style.setProperty('--my-anchor-width', width + 'px');
            let height = getDomSize(anc, {type: 'height'})
            this.style.setProperty('--my-anchor-height', height + 'px');
        });
        let _getScrollParent = this._getScrollParent();
        // console.log('_getScrollParent', this, _getScrollParent)
        if (_getScrollParent) {
            this._handlePos.bind(this)()
            _getScrollParent.addEventListener('scrollend', this._handlePos.bind(this));
        }
    }
    _handlePos(e) {
        if (this.classList.contains('pos-h')) {
            let rect = this.getBoundingClientRect();
            let targetRect = this._shadowRoot.querySelector('#my-target-positioning').getBoundingClientRect();
            // console.log('sssssssssssssssss', rect.top, targetRect.height)
            this.classList.toggle('pos-lt', rect.top > targetRect.height);
        }
    }
    attrChanged(name, oldValue, newValue) {
        if (name === 'readonly') {
            this.isOpen = false;
            this.classList.toggle('is-open', this.isOpen);
        }
    }
}

ZInputPopup.defsel('z-inputpopup', {
    attrs: {
        value: '',
        readonly: false,
    }
});